<!--table id="library_widget" class="widget bar_content" -->
<div id="library_widget" class="widget bar_content" style="width:90%;margin:auto;background-color:#fff;">
<!--tbody><tr>
<td-->
  <div class="widget_instructions" style="width:30%;padding-right:1em;float:left;font-size:small;">
    <h2>About library</h2>
    <p>
      Just type some words from the text you're looking for, select a result and 
      check if it's the right one in the preview. If your search has come to an end
      simply click on "add to the page!".
    </p>
  </div>
<!--/td>
<td-->
  <div id="library" style="width:30%;  float:left;">
    <div id="contents_list">
      <label for="searchtext">Search Library:</label>
      <%= text_field_tag :searchtext %><br/>
      <%= image_tag "spinner.gif", :id=>"spinner", :style=>"display:none;" %>
      <span id="search_comment"></span><br/>
      <select name="content[id]" id="select_content" style="overflow:auto;width:20em;height:20em;" size="10">
        <%= render :partial=>"contents_list" %>
      </select><br/>
      <small id="content_actions" style="display:none">Selected content:
      <%= link_to_remote "delete", 
            { :url=>{:controller=>"contents", :action=>"delete_content", :id=>@page.id }, 
              :submit=>"contents_list", 
              :confirm=>"This deletion will affect all the pages!\n\nAre you sure?",
              :loading=>( remote_function :url => { :action => :live_search },
                                    :with => "('searchtext='+$('searchtext').value)"),
              :loading => "Element.show('spinner')",
              :complete => "Element.hide('spinner')"
            },
            { :style=>"color:red" }%>
       <%= link_to_remote "edit",
            { :url=>{:controller=>"contents", :action=>"edit_page_element", :id=>@page.id }, 
              :submit=>"contents_list",
              :loading => "Element.show('spinner')",
              :complete => "Element.hide('spinner')" 
            } %></small>&nbsp;
    </div>
    
    <%= observe_field(:searchtext,
                     :frequency => 0.5,
                     :with => "('searchtext='+$('searchtext').value)",
                     :loading => "Element.show('spinner')",
                     :complete => "Element.hide('spinner')",
                     :url => { :action => :live_search }) %>
    <%= observe_field(:select_content,
                     :on => "select",
                     :frequency => 0.1,
                     :update => "content_preview",
                     :with => "select_content",
                     :loading => "Element.show('spinner')",
                     :complete => "Element.hide('spinner');if ($('select_content').value != '') {Element.show('content_actions')};",
                     :url => { :action => :content_preview }) %>
    
    <h2><%= link_to_remote "add to the page!", :url=>{:controller=>"contents", :action=>"create_page_element", :id=>@page.id }, :submit=>"contents_list" %></h2>
  </div>
<!--/td>
<td!-->
  <div id="content_preview" style="width:30%;height:25em;text-align:left;float:left;overflow:auto;font-size:small;padding:1em;margin-left:1.5em;">
    <i style="color:lightgrey">no content selected for the preview</i>
  </div>
<!--/td!-->
  <div class="clear"></div>
<!--/tr>
</tbody></table!-->
</div>